import React, { Component } from 'react'


// import  {incrementCreator,decrementCreator} from '../reudx/actions'

export default class AppUI extends Component {
   
    // 加

    increment = () => {
        // 1  获取到选择框里面的值
        let selectVal = this.refs.selectVal.value * 1
       
        // 2  获取到初始状态 现在初始状态被redux已经管理了
       

        
        
        // 3  进行计算 并且更新状态
        this.props.store.dispatch({type:'increment',data:selectVal})
      
     

    }

    // 减
    decrement = () => {
        // 1  获取到选择框里面的值
        let selectVal = this.refs.selectVal.value * 1
        // 2  获取到初始状态 现在初始状态被redux已经管理了
       

        
        
        // 3  进行计算 并且更新状态
        this.props.store.dispatch({type:'decrement',data:selectVal})

    }

    // 偶数加

    oddIncrement = () => {
        // 1  获取到选择框里面的值
        let selectVal = this.refs.selectVal.value * 1

          // 2  获取到初始状态 现在初始状态被redux已经管理了
          let count=this.props.store.getState()
          if(count%2===0)  {


        // 3  进行计算 并且更新状态
        this.props.store.dispatch({type:'increment',data:selectVal})
      

          }
       

        
        
       


    }
    //异步加

    asyncIncrement = () => {
        // 1  获取到选择框里面的值
        let selectVal = this.refs.selectVal.value * 1
          // 2  获取到初始状态 现在初始状态被redux已经管理了
        
        setTimeout(() => {
            // 3  进行计算 并且更新状态
            this.props.store.dispatch({type:'increment',data:selectVal})
        }, 1000)

    }

    render() {
       let count=  this.props.store.getState()  //从redux取出初始值
        return (
            <div>
                <p> click  {count} times</p>
                <div>
                    <select ref='selectVal'>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;
         <button onClick={this.increment}>+</button>&nbsp;
         <button onClick={this.decrement}>-</button>&nbsp;
         <button onClick={this.oddIncrement}>偶数加</button>&nbsp;
         <button onClick={this.asyncIncrement}>异步触发</button>

                </div>


            </div>

        )
    }
}